<script lang="ts">
    import Icon from "../Common/Icons/Icon.svelte";
    import { useClassList } from "../utils/useClassList";
    import type { BannerProps } from "./Banner";

    let { visible = $bindable(true), ...props }: BannerProps = $props();

    const classList = $derived(
        useClassList(props, "cm-banner", {
            [`cm-banner-${props.type}`]: props.type,
            [`cm-banner-bordered`]: props.bordered,
            [`cm-banner-full`]: props.fullMode ?? true,
            [`cm-banner-not-full`]: props.fullMode === false,
        })
    );

    const onClickClose = () => {
        visible = false;
        props.onclose?.();
    };
</script>

{#snippet renderIcon()}
    {#if props.type === "info"}
        <Icon icon="info" />
    {:else if props.type === "success"}
        <Icon icon="checkCircle" />
    {:else if props.type === "warning"}
        <Icon icon="warningFill" />
    {:else if props.type === "error"}
        <Icon icon="xFillCircle" />
    {:else}
        <Icon icon="info" />
    {/if}
{/snippet}

{#if visible}
    <div class={classList}>
        <div class="cm-banner-body">
            <div class="cm-banner-content">
                {#if props.icon !== null}
                    <div class="cm-banner-icon">
                        {#if props.icon}
                            {@render props.icon()}
                        {:else}
                            {@render renderIcon()}
                        {/if}
                    </div>
                {/if}
                <div class="cm-banner-content-body">
                    {#if props.title}
                        <div class="cm-banner-title">
                            {#if typeof props.title === "function"}
                                {@render props.title()}
                            {:else}
                                {props.title}
                            {/if}
                        </div>
                    {/if}
                    {#if props.children}
                        <div class="cm-banner-desc">
                            {@render props.children?.()}
                        </div>
                    {/if}
                </div>
            </div>
            {#if props.closeIcon !== null}
                <!-- svelte-ignore a11y_click_events_have_key_events -->
                <!-- svelte-ignore a11y_no_static_element_interactions -->
                <span class="cm-banner-close" onclick={onClickClose}>
                    {#if props.closeIcon}
                        {@render props.closeIcon()}
                    {:else}
                        <Icon icon="times" />
                    {/if}
                </span>
            {/if}
        </div>
        {#if props.extra}
            <div class="cm-banner-extra">
                {#if typeof props.extra === "function"}
                    {@render props.extra()}
                {:else}
                    {props.extra}
                {/if}
            </div>
        {/if}
    </div>
{/if}
